<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z1 menu" md-component-id="left" md-is-locked-open="$media('gt-md')">
    
    <md-toolbar>
        <h1 class="md-toolbar-tools">Menu</h1>
    </md-toolbar>

    <md-content layout="column">
        <div layout="column" class="menu-header">
            <h3>Administration</h3>
			<h3>Quarty</h3>
        </div>
        <div layout="column" layout-align="start center" class="menu-actions">
            <md-button ng-href="#/user/create" aria-label="User">
                <md-icon md-svg-src="/assets/icons/grey/user.svg" class="md-small"></md-icon>
                <span>Nouvel utilisateur</span>
            </md-button>
            <md-button ng-href="#/shop/create" aria-label="Shop">
                <md-icon md-svg-src="/assets/icons/grey/home.svg" class="md-small"></md-icon>
                <span>Nouvelle boutique</span>
            </md-button>
            <md-button ng-click="disconnect()" aria-label="Disconnect">
                <md-icon md-svg-src="/assets/icons/grey/times.svg" class="md-small"></md-icon>
                <span>Déconnecter</span>
            </md-button>
        </div>
    </md-content>
</md-sidenav>

<div layout="column" layout-fill tabindex="-1" role="main">

    <md-toolbar class="toolbar md-whiteframe-z1">

        <div class="md-toolbar-tools">

            <md-button aria-label="Toggle Menu" ng-click="openMenu()" hide-gt-md>
                <md-icon md-svg-src="/assets/icons/white/bars.svg" class="md-medium"></md-icon>
            </md-button>

            <div layout flex>
                
                <div class="md-toolbar-item">
                    <md-button ng-click="back()" aria-label="Back">
                        <md-icon md-svg-src="/assets/icons/white/arrow-left.svg" class="md-medium"></md-icon>
                    </md-button>
                    <span hide-sm>Quarty</span>
                </div>

            </div>
        </div>
    </md-toolbar>
    
    <md-tabs md-selected="selectedIndex" class="md-whiteframe-z1 md-primary">
        <md-tab id="tab1" aria-controls="tab1-content">
            <md-icon md-svg-src="/assets/icons/white/user.svg" class="md-medium"></md-icon>
			<span hide-sm>Utilisateurs</span>
        </md-tab>
        <md-tab id="tab2" aria-controls="tab2-content">
            <md-icon md-svg-src="/assets/icons/white/home.svg" class="md-medium"></md-icon>
			<span hide-sm>Commerces</span>
        </md-tab>
    </md-tabs>

	<md-content md-scroll-y flex>
	    <ng-switch on="selectedIndex">
	        <div role="tabpanel" id="tab1-content" aria-labelledby="tab1" ng-switch-when="0" md-swipe-left="next()" md-swipe-right="previous()">
	            <div ng-controller="UsersCtrl" ng-include="'/admin/partials/app/users.html'" layout="column" layout-fill layout-padding></div>
	        </div>
	        <div role="tabpanel" id="tab2-content" aria-labelledby="tab2" ng-switch-when="1" md-swipe-left="next()" md-swipe-right="previous()">
	            <div ng-controller="ShopsCtrl" ng-include="'/admin/partials/app/shops.html'" layout="column" layout-fill layout-padding></div>
	        </div>
	    </ng-switch>
	</md-content>

</div>
